<template>
  <div>
    <nav>
      <van-nav-bar
        :fixed="true"
        :placeholder="true"
        title="搜索药品"
        left-text="返回"
        right-text="首页"
        left-arrow
        @click-left="onClickLeft"
        @click-right="$router.push('/index')"
      />
      <van-search
        v-model="searchVal"
        shape="round"
        ref="search"
        placeholder="搜索疾病/症状/药品/问题"
        @search="$router.push('/search?word=' + searchVal)"
      />
      <Barrage />
    </nav>
    <main>
      <!-- 历史记录 -->
      <div class="log" v-if="!$route.query.word">
        <h4>
          历史记录<van-button
            style="border: none"
            icon="delete-o"
            type="default"
          ></van-button>
        </h4>
        <template v-for="item in logs" :key="item">
          <van-button
            style="margin: 0 10px; height: 25px; border-radius: 15px"
            type="default"
            @click="changeWord(item)"
            >{{ item }}</van-button
          >
        </template>
      </div>
      <!-- 药品列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          id="content"
          v-for="item in list"
          :key="item.id"
          @click="store.changeParams({ id: item.hash_id }), (showHist = true)"
        >
          <div id="left">
            <img :src="item.cover" alt="" />
            <span v-show="!!item.is_prescription == 1">处方药</span>
          </div>
          <div id="right">
            <h3>{{ item.sell_point }}</h3>
            <p>{{ item.title }}</p>
            <template v-for="val in item.spec_data">
              <p v-for="text in val.option_data" :key="text.name">
                {{ text.name }}
              </p>
            </template>
            <div>
              <p>
                <span>￥{{ item.sku_info.price }}</span
                ><span>￥{{ item.sku_info.market_price }}</span>
              </p>
              <van-button
                style="
                  height: 30px;
                  border: none;
                  background-color: #e5f8f6;
                  border-radius: 35px;
                "
                icon="plus"
                plain
                type="success"
                >选购</van-button
              >
            </div>
          </div>
        </div>
      </van-list>
    </main>
    <van-action-sheet
      style="height: 80%"
      v-model:show="showHist"
      title="说明书"
    >
      <Manual v-show="showHist"> </Manual>
    </van-action-sheet>
  </div>
</template>
<script setup>
import Barrage from "../components/Consult/Barrage.vue";
import Manual from "../components/Manual.vue";
import { onActivated, ref } from "vue";
import { getSearchs } from "../API";
import { useRoute, onBeforeRouteUpdate, useRouter } from "vue-router";
import { useCount } from "../store/index";
let store = useCount();
// 获取路由参数
let route = useRoute();
let router = useRouter();
let search = ref(null);
// 搜索文字
let searchVal = ref("");

onActivated(() => {
  // console.log(route.query.word);
  // 搜索框自动聚焦事件
  route.query.word || search.value.focus();
  // 把路由参数显示到搜索框上
  searchVal.value = route.query.word || "";
  getDrugList();
});

// 声明页码
let page = 1;
// 药品列表
const list = ref([]);
// 存放历史搜索数组
let logs = ref([]);
// 获取历史记录数组
let localLogs = localStorage.getItem("logs");
if (localLogs) {
  logs.value = JSON.parse(localLogs);
}

// 历史记录点击请求接口
let changeWord = (newValue) => {
  searchVal.value = newValue;
  initRequest();
};
// 按照搜索词搜索列表
let getDrugList = async () => {
  //表示触底加载停止
  loading.value = true;
  // console.log(searchVal.value);
  let { data } = await getSearchs({
    word: searchVal.value,
    page,
  });
  // list.value = data.data.list;
  list.value.push(...data.data.list);
  // console.log(list.value);
  // 页码是1的时候说明用户是有效搜索
  if (page == 1 && data.data.list.length) {
    logs.value.push(searchVal.value);
    // 去重
    logs.value = [...new Set(logs.value)];
    localStorage.setItem("logs", JSON.stringify(logs.value));
  }
  //表示需要继续触底加载
  loading.value = false;
  // 所有数据都被加载完后，显示“没有更多数据”
  finished.value = !data.data.list.length;
};

const onClickLeft = () => {
  history.back();
};

// 初始化请求
let initRequest = () => {
  if (searchVal.value) {
    list.value = [];
    page = 1;
    getDrugList();
  }
};
// 解决路由缓存的问题
onBeforeRouteUpdate(async (to, from) => {
  if (to.query.word !== from.query.word) {
    searchVal.value = to.query.word;
    initRequest();
  }
});

//触底加载
const loading = ref(false);
const finished = ref(false);
// 触底加载函数
let onLoad = () => {
  page++;
  getDrugList();
};

let showHist = ref(false);
</script>
<style scoped>
.font-bold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  color: #b0914e;
}
.font-bold div {
  margin-right: 10px;
}
.font-bold p {
  margin: 0 10px;
}
main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 20px;
  box-sizing: border-box;
}
.log {
  width: 100%;
  box-sizing: border-box;
}
.log h4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#content {
  width: 100%;
  height: 320px;
  padding: 20px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
#left {
  width: 210px;
  height: 230px;
  border-radius: 35px;
  overflow: hidden;
  position: relative;
}
#left span {
  width: 100px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e4e4e4;
  display: flex;
  justify-content: center;
  align-items: center;
}
#content img {
  width: 210px;
  height: 230px;
}
#right {
  width: 400px;
  height: 220px;
  padding: 0 20px;
}
#right p:nth-of-type(1) {
  color: #7d7d7d;
  margin: 10px 0;
}
#right div {
  width: 450px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28px;
}
#right div span:nth-of-type(1) {
  font-weight: bold;
  color: #1ec7af;
  margin-right: 10px;
}
#right div span:nth-of-type(2) {
  color: #7d7d7d;
  text-decoration: line-through;
}
</style>